/*默认样式*/
*{
    box-sizing: border-box;
    margin:0 auto;
}

body{
    background-image: url(/images/subtle-pattern-1.jpg);
}

.topnav{
    width:100%;
    background-color:#A5DEE4 ;
    overflow: hidden;
    /*了解！*/
}


.topnav a{
    float: left;
    display: block;
    color:white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav .title{
    color: black;
}



ruby{
    text-shadow: 3px 3px 1px white;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
}

.topnav a:hover{
    background-color: #78C2C4;
}

.topnav a.active{
    background-color: #4c9a9c;
    font-weight: bold;
}

.topnav input[type=text]{
    padding: 6px;
    border:none;
    margin-top:8px;
    margin-right: 16px;
}

.topnav .search-container{
    float: right;
}
.topnav .search-container button {
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }
  
  .topnav .search-container button:hover {
    background: #ccc;
  }

/*当屏幕宽度小于600px时， 垂直堆叠显示菜单选项和搜索框*/
@media screen and (max-width:600px)
{
    .topnav .search-container {
        float: none;
      }
    .topnav a,
    .topnav input[type=text],
    .topnav .search-container button{
        float:none;
        text-align: left;
        width:100%;
        margin:0;
        padding: 14px;
    }

    .topnav input[type=text]{
        border:1px solid #ccc;
    }
    
}



/*标题字体*/
@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('//at.alicdn.com/t/webfont_mjtpbq0l4h.eot'); /* IE9*/
    src: url('//at.alicdn.com/t/webfont_mjtpbq0l4h.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('//at.alicdn.com/t/webfont_mjtpbq0l4h.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_mjtpbq0l4h.woff') format('woff'), /* chrome、firefox */
    url('//at.alicdn.com/t/webfont_mjtpbq0l4h.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('//at.alicdn.com/t/webfont_mjtpbq0l4h.svg#杨任东竹石体-Bold') format('svg'); /* iOS 4.1- */
  }
.web-font{
    font-family:"webfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    font-size:2em;
}

/*----------------grid布局---------------------*/
.main-grid{
    width:80%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    /* grid-template-columns 属性创建一个 2 列的网格，每个列都是一个单位宽度, fr 是网格容器剩余空间的等分单位。）*/
    grid-template-rows: repeat(5,1fr);
    /*通过行或列的方式来依次填充*/
    grid-template-areas:
    "1 2"
    "3 3-1"
    "3-2 3-3"
    "3-4 3-5"
    "4-1 4-2"
}
.firststep{
    grid-area: 1;
}
.secondstep{
    grid-area: 2;
}
.thirdstep{
    grid-area: 3;
}
.thirdstep-one{
    grid-area: 3-1;
}
.thirdstep-two{
    grid-area: 3-2;
}
.thirdstep-three{
    grid-area: 3-3;
}
.thirdstep-four{
    grid-area: 3-4;
}
.thirdstep-five{
    grid-area: 3-5;
}
.fourthstep-one{
    grid-area: 4-1;
}
.fourthstep-two{
    grid-area: 4-2;
}

/*当屏幕宽度小于600px时， grid布局实现响应式设计*/
@media screen and (max-width:600px){
    .main-grid{
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(10,1fr);
    grid-template-areas:
    "1"
    "2"
    "3"
    "3-1"
    "3-2"
    "3-3"
    "3-4"
    "3-5"
    "4-1"
    "4-2"
    }
}


.firststep,
.secondstep,
.thirdstep, 
.thirdstep-one,
.thirdstep-two,
.thirdstep-three,
.thirdstep-four,
.thirdstep-five,
.fourthstep-one,
.fourthstep-two{
    margin-top:20px;
    margin-bottom: 20px;
    width: 80%;
    background-color:white ;
    padding: 20px;
    border: 1px solid rgb(238, 237, 237);
    box-shadow: 0px 0px 10px grey;
    /* overflow: hidden; */
}


p::first-line{
    font-weight: bold;
}


.begin,
.end{
    margin-left:10%;
    text-align: center;
    width: 80%;
    background-color:white ;
    padding: 30px;
    border: 1px solid rgb(238, 237, 237);
    box-shadow: 0px 0px 10px grey;
}



/*浮动广告*/
.floadAd { position: absolute;z-index: 999900; display: none; }
.floadAd .item { display: block; }
.floadAd .item img { vertical-align: bottom; }
/* a img 的组合浏览器默认下边会有几个像素的空白，这里可以消除空白*/


#footer{
    text-align: center;
}

#footer a{
    text-decoration: none;
    padding:1em 2em;
}

